import React, {Component} from 'react';
import axios from "axios";
import './css/film.css'

const bus = {

    list: [],

    subscribe(callback) {
      this.list.push(callback);
    },

    publish(message) {
        this.list.forEach(callback => {
            callback(message);
        })
    }
}

class Film extends Component {
    render() {
        return <div>
            <div className="film">
                <img onClick={() => bus.publish(this.props.synopsis)}
                     src={this.props.poster}
                     alt={this.props.name}/>
                <span>{this.props.name}</span>
            </div>
        </div>
    }
}

class App extends Component {
    constructor(props) {
        super(props);
        axios.get("/test.json").then(res => {
            this.setState({list: res.data.data.films})
        })
    }

    state = {
        list: []
    }

    render() {
        return (<div>
            {
                this.state.list.map(item =>
                    <Film key={item.filmId}
                          {...item}>
                    </Film>)
            }
            <FilmDetail></FilmDetail>
        </div>);
    }
}

class FilmDetail extends Component {
    constructor(props) {
        super(props);
        this.state = {
            message: ''
        }
        bus.subscribe(message => {
            this.setState({message: message});
        })
    }
    render() {
        return <div className="filmDetail">
            {this.state.message}
        </div>
    }
}

export default App;